<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            //获取按钮对象
            var btn1 = document.getElementById("btn1");
            /*
                使用 对象.事件=函数 的形式绑定响应函数，
                它只能同时为一个元素的一个事件绑定一个响应函数
                不能绑定多个，如果绑定多个，后边的会覆盖掉前边的
            */
            //为btn1绑定一个单机响应函数
            // btn1.onclick=function(){
            //     alert(1);
            // }
            /*
                addEventListener
                    -通过这个方法也可以为元素绑定响应函数
                    -参数：
                        1.事件的字符串，不要on
                        2.回调函数，当事件触发时该函数会被调用
                        3.是否在捕获阶段触发事件，需要一个布尔值，一般为false
                
                使用 addEventListener() 可以同时为一个元素的相同事件绑定多个响应函数
                这样当事件被触发时，响应函数将会按照事件的函数绑定顺序执行
                不支持ie8以下

                ie8中可以用
                attachEvent()
                    1.事件的字符串，要on
                    2.回调函数
            */
            // btn1.addEventListener("click", function () {
            //     alert(1);
            // }, false);
            // btn1.addEventListener("click", function () {
            //     alert(2);
            // }, false);
            // btn1.addEventListener("click", function () {
            //     alert(3);
            // }, false);
            bind(btn1,"click",function(){
                alert(1);
            });
        }

        //定义一个函数，用来为指定元素绑定响应函数
        /*
           addEventListener()中的this,是绑定事件的对象
               attachEvent()中的this,是window
       */
        /*
            参数：
                obj 要绑定事件的对象
                eventStr 事件的字符串(不要on)
                callback 回调函数
        */
        function bind(obj, eventStr, callback) {
            if (obj.addEventListener) {
                //大部分浏览器
                obj.addEventListener(eventStr, callback, false);
            } else {
                /*
                    this是谁由调用方式决定
                    callback.call(obj)
                */
                //ie8以下
                obj.attachEvent("on" + eventStr, function(){
                    //在匿名函数中调用回调函数
                    callback.call();
                });
            }
        }
    </script>
</head>

<body>
    <button id="btn1">点我一下</button>
</body>

</html>